<template>
  <div>
    <div v-if="showFlag==1">
      <div class="dialog-step">
        <div class="step-item step-one step-active">
          <span>1</span>
          <p>身份认证</p>
        </div>
        <div class="step-item step-two" :class="{'step-active':stepNum > 1 }">
          <span>2</span>
          <p>设置操作</p>
        </div>
        <div
          class="step-item step-four"
          :class="{'step-active':stepNum > 2}"
          @click="selectStep(4)"
        >
          <span>✔</span>
          <p>完成</p>
        </div>
      </div>
      <div class="phone-content" v-if="stepNum==1">
        <img class="jiance-img" src="@/assets/jiance.png" alt />
        <p>为确认是您本人操作，请选择以下任一方式完成身份认证</p>
        <el-button @click="showHandle(2)">使用手机短信验证码</el-button>
        <!-- <el-button @click="showHandle(3)">使用绑定银行卡信息</el-button> -->
        <el-button v-show="userInfo.bankcard" @click="showHandle(3)">使用绑定银行卡信息</el-button>
      </div>

      <div class="phone-content phone-stepNum2" v-if="stepNum==2">
        <el-checkbox-group v-model="checkedCities" @change="selectPhoneType">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
        <el-form label-width="100px">
          <el-form-item label="新手机号码：">
            <el-input
              v-model="setPhoneParams.phone"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g, '')"
              placeholder="请输入常用手机号"
            ></el-input>
          </el-form-item>
          <el-form-item v-show="setPhoneParams.type" label="短信验证码：">
            <el-input v-model="setPhoneParams.code" placeholder="请输入短信验证码"></el-input>
            <span v-if="!downShow" class="getCode" @click="getCode(1)">获取验证码</span>
            <span v-else class="getCode getCode-wait">{{downNum}}秒后重新发送</span>
          </el-form-item>
        </el-form>
        <el-button @click="_changePhone">提交</el-button>
      </div>

      <div class="phone-content" v-if="stepNum==3">
        <img class="successImg" src="@/assets/icon-success.png" alt />
        <h1 class="successText">修改成功！</h1>
      </div>
    </div>

    <div v-else-if="showFlag==2" class="phone-box">
      <div class="phone-mine">
        <img src="@/assets/accountSettings/icon8.png" alt />
        <h2>使用手机短信验证码</h2>
        <p>当前手机号 {{showPhone}}</p>
        <el-form label-width="100px">
          <el-form-item label="短信验证码：">
            <el-input v-model="phoneCheckParams.code" placeholder="请输入短信验证码"></el-input>
            <span v-if="!downShow" class="getCode" @click="getCode(0)">获取验证码</span>
            <span v-else class="getCode getCode-wait">{{downNum}}秒后重新发送</span>
          </el-form-item>
        </el-form>
        <el-button @click="showHandle(1)">返回</el-button>
        <el-button @click="submitHandle('phone')">提交认证</el-button>
      </div>
    </div>

    <div v-else class="phone-box">
      <div class="phone-mine">
        <img src="@/assets/accountSettings/icon9.png" alt />
        <h2>已绑定银行卡</h2>
        <p>当前绑定银行卡 {{userInfo.bankname}}（{{userInfo.bankcard}}）</p>
        <el-form label-width="100px">
          <el-form-item label="银行卡号：">
            <el-input
              v-model="cardCheckParams.bankcard"
              oninput="value=value.replace(/[^\d]/g, '')"
              placeholder="请输入银行卡号"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号码：">
            <el-input v-model="cardCheckParams.idcard" placeholder="请输入身份证号码"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="showHandle(1)">返回</el-button>
        <el-button @click="submitHandle('card')">提交认证</el-button>
      </div>
    </div>

    <div class="dialog-footer" v-if="showFlag==1 && stepNum == 1">
      <div>
        <p>如何修改手机号？</p>
        <span>如您的手机号已不再使用，可点击“修改手机号”，身份认证通过后，您可按照页面提示更换账号关联手机。</span>
      </div>
      <div>
        <p>为什么要进行身份认证？</p>
        <span>如账号信息被不法分子恶意窃取进行非法操作时，通过身份认证工具可有效阻止不法行为，最大力度保障您的账号安全。</span>
      </div>
    </div>

    <div class="dialog-footer" v-if="showFlag==2">
      <div>
        <p>收不到短信验证码？</p>
        <span>请检查手机网络并且核实手机是否屏蔽系统短信，如均正常请重新获取或稍后再试。</span>
      </div>
    </div>

    <div class="dialog-footer showFlag3" v-if="showFlag==3"></div>
  </div>
</template>

<script>
import {
  getUserInfo,
  getVertify,
  checkLoaclPhone,
  changePhone,
  checkBankCard
} from "@/api/accountSettings";
const cityOptions = ["平台号码", "云商通号码"];
export default {
  name: "phone",
  data() {
    return {
      checkedCities: ["平台号码", "云商通号码"],
      cities: cityOptions,
      showFlag: 1,
      dialogFlag: true,
      stepNum: 1,
      phoneType: ["平台号码", "云商通号码"],
      codeParams: {
        type: 2,
        phone: ""
      },
      phoneCheckParams: {
        code: "",
        mobile: ""
      },
      cardCheckParams: {
        idcard: "",
        bankcard: ""
      },
      setPhoneParams: {
        type: "2",
        phone: "",
        code: ""
      },
      downNum: 10,
      downShow: false,
      phoneType: [],
      showPhone: "",
      userInfo: {}
    };
  },
  created() {
    this._getUserInfo();
  },
  methods: {
    // 重置步骤
    resetPages() {
      if (this.stepNum == 3) {
        this.stepNum = 1;
        console.log("重置步骤", this.stepNum);
      }
    },
    selectPhoneType(val) {
      console.log(val);
      if (val.length == 2) {
        this.setPhoneParams.type = 2;
        this.codeParams.type = 1;
      } else if (val.length == 0) {
        this.setPhoneParams.type = "";
        this.codeParams.type = "";
      } else {
        if (val[0] == "平台号码") {
          this.setPhoneParams.type = 0;
          this.codeParams.type = 0;
        } else {
          this.setPhoneParams.type = 1;
          this.codeParams.type = 1;
        }
      }
      console.log("号码类型", this.codeParams.type);
    },
    // 获取用户信息
    _getUserInfo() {
      getUserInfo().then(res => {
        this.userInfo = res.data;
        // console.log("账户信息", this.userInfo);
        let reg = /^(\d{3})\d+(\d{4})$/;
        this.showPhone = this.userInfo.loginphone.replace(reg, "$1****$2");
        this.phoneCheckParams.mobile = this.userInfo.loginphone;
      });
    },
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT && this.downShow) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 修改手机号
    _changePhone() {
      console.log("修改手机号参数", this.setPhoneParams);
      if (this.setPhoneParams.type === "") {
        this.$message.error("请选择号码类型");
      } else if (this.setPhoneParams.phone == "") {
        this.$message.error("请输入新手机号码");
      } else if (
        this.setPhoneParams.code == "" &&
        (this.setPhoneParams.type == 1 || this.setPhoneParams.type == 2)
      ) {
        this.$message.error("请输入验证码");
      } else {
        changePhone(this.setPhoneParams).then(res => {
          if (res.code == 1) {
            this.$message.success("修改成功");
            this.stepNum = 3;
            setTimeout(() => {
              window.location.reload();
            }, 1000);
          } else {
            this.$message.error(res.msg || "修改失败");
          }
        });
      }
    },
    // 获取验证码
    getCode(num) {
      console.log(num);
      if (num == 0) {
        console.log("发送验证验证码", this.codeParams);

        this.codeParams.type = 2;
        this._getVertify(this.codeParams);
      } else {
        this.codeParams.type = 1;
        this.codeParams.phone = this.setPhoneParams.phone;
        console.log("发送修改手机号", this.codeParams);
        const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;

        if (this.codeParams.type === "") {
          this.$message.error("请选择号码类型");
        } else if (this.codeParams.phone == "") {
          this.$message.error("请输入新手机号码");
        } else if (!reg.test(this.codeParams.phone)) {
          this.$message.error("请输入正确的手机号");
        } else {
          this._getVertify(this.codeParams);
        }
      }
    },
    _getVertify(params) {
      getVertify(params).then(res => {
        console.log("验证码res", res);
        if (res.code == 1) {
          this.downShow = true;
          this.countDown();
          this.$message.success("发送成功，请注意查收短信");
        } else {
          this.$message.error(res.msg || "发送失败");
        }
      });
    },
    // 提交认证
    submitHandle(type) {
      if (type == "phone") {
        console.log("手机号验证参数", this.phoneCheckParams);
        if (this.phoneCheckParams.code == "") {
          this.$message.error("请输入验证码");
        } else {
          checkLoaclPhone(this.phoneCheckParams).then(res => {
            console.log("手机号验证res", res);
            if (res.code == 1) {
              this.$message.success("验证通过");
              this.showFlag = 1;
              this.downShow = false;
              this.stepNum = 2;
            }
          });
        }
      } else {
        console.log("银行卡验证参数", this.cardCheckParams);
        if (this.cardCheckParams.bankcard == "") {
          this.$message.error("请输入银行卡号码");
        } else if (this.cardCheckParams.idcard == "") {
          this.$message.error("请输入身份证号码");
        } else {
          checkBankCard(this.cardCheckParams).then(res => {
            console.log("银行卡验证res", res);
            if (res.code == 1) {
              this.$message.success("验证通过");
              this.showFlag = 1;
              this.stepNum = 2;
            }
          });
        }
      }
    },
    showHandle(show) {
      this.showFlag = show;
    }
  }
};
</script>

<style lang='scss' scoped>
.phone-box {
  margin-top: 40px;
  .phone-mine {
    text-align: center;
    h2 {
      font-size: 18px;
      font-weight: 400;
      color: #333;
      margin-top: 20px;
    }
    p {
      font-size: 14px;
      color: #999;
      margin-bottom: 40px;
    }
    .el-form {
      width: 50%;
      margin: 0 auto;
      .el-form-item {
        margin-bottom: 35px;
        .el-form-item__content {
          position: relative;
          .el-input__inner {
            width: 300px;
          }
          .getCode {
            color: #ff8765;
            position: absolute;
            right: 10px;
            display: block;
            height: 100%;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            &.getCode-wait {
              color: #ccc;
            }
          }
        }
      }
    }
    .el-button {
      width: 100px;
    }
  }
}
.phone-content {
  text-align: center;
  .successImg {
    width: 100px;
    height: 125px;
  }
  .successText {
    font-size: 20px;
    color: #333;
  }
  .jiance-img {
    width: 65px;
    height: 90px;
  }
  p {
    color: #999;
    margin-bottom: 30px;
  }
  .el-button {
    display: block;
    margin: 0 auto;
    &:first-of-type {
      margin-bottom: 20px;
    }
  }

  &.phone-stepNum2 {
    padding-bottom: 40px;
    .el-form {
      width: 50%;
      margin: 40px auto;

      .el-form-item {
        margin-bottom: 35px;
        .el-form-item__content {
          position: relative;
          .el-input__inner {
            width: 300px;
          }
          .getCode {
            color: #ff8765;
            position: absolute;
            right: 10px;
            display: block;
            height: 100%;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            &.getCode-wait {
              color: #ccc;
            }
          }
        }
      }
    }
    .el-button {
      width: 50%;
      height: 45px;
      background: #ff7f5b;
      color: #fff;
    }
  }
}

.dialog-footer {
  padding: 20px 40px 40px 40px;
  border-top: 1px solid #ebf0f2;
  text-align: left;
  font-size: 14px;
  margin-top: 40px;
  &.showFlag3 {
    border: none;
  }
  p {
    color: #333;
  }
  span {
    color: #999;
  }
}
.dialog-step {
  width: 70%;
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
  text-align: center;
  .step-item {
    width: 130px;
    font-size: 16px;
    span {
      padding: 2px 15px;
      background: #bcbcbc;
      border-radius: 11px;
      color: #fff;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        width: 55px;
        height: 1px;
        background: #cccccc;
        top: 50%;
        transform: translateY(-50%);
        left: -65px;
      }
      &::after {
        content: "";
        position: absolute;
        width: 55px;
        height: 1px;
        background: #cccccc;
        top: 50%;
        transform: translateY(-50%);
        right: -65px;
      }
    }
    p {
      color: #bcbcbc;
    }
    &.step-active {
      span {
        background: #ff7f5b;
        &::after {
          background: #ff7f5b;
        }
        &::before {
          background: #ff7f5b;
        }
      }
      p {
        color: #ff7f5b;
      }
    }
    &:first-of-type {
      span {
        &::before {
          display: none;
        }
        &::after {
          background: #ff7f5b;
        }
      }
    }
    &:last-of-type {
      span {
        &::after {
          display: none;
        }
      }
    }
  }
}
</style>